<template>
  <view class="warehouseContainer">
    <view class="warehouseGoods" v-for="(tea,index) in teaHouseData" :key="tea.id">
      <image style="height: 375upx;" :src="tea.cover" mode=""></image>
      <scroll-view v-if="tea.goods.length" class="warehouseMain" scroll-x enable-flex>
        <view class="warehouseItem" v-for="(g,index) in tea.goods" :key="g.id">
          <image class="itemImg" :src="g.cover" mode=""></image>
          <view class="itemText">￥{{g.price}}</view>
        </view>
        <view class="more">
          <text class="moreText">查 看 更 多</text>
        </view>
      </scroll-view>
    </view>
    
    <view class="footer">
      <view class="line"></view>
      <view class="footerText">无更多茶仓</view>
      <view class="line"></view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
  export default {
    data() {
      return {
        
      };
    },
    mounted(){
      this.getTeaHouseData()
    },
    methods:{
      getTeaHouseData(){
        this.$store.dispatch('home/getTeaHouseData')
      }
    },
    computed:{
      ...mapState('home',['teaHouseData'])
    }
  }
</script>

<style lang="stylus" scoped>
.warehouseContainer
  height: 100%
  .warehouseGoods
    .warehouseMain
      height: 234upx
      display: flex
      flex-wrap: nowrap
      .warehouseItem
        display: flex
        width: 150upx
        height: 194upx
        flex-shrink: 0
        .itemImg
          height: 150upx
          width: 100%
        .itemText
          font-size: 28upx
          margin:160upx 0 0 -150upx
      .more
        display: flex
        background-color: #eee
        width: 150upx
        height: 150upx
        flex-shrink: 0
        .moreText
          padding: 30upx 20upx 20upx 40upx
          font-size: 32upx
          color: #999
  .footer
    width: 100%
    height: 100upx
    display: flex
    margin-left: 100upx
    .line
      width: 100upx
      height: 1px;
      background-color: #ccc;
      margin:50upx
    .footerText
      font-size: 32upx
      color: #999
      margin-top: 30upx
</style> 
